<template>
  <div class="dh-dropdown">
   
    <Tooltip
      :placement="placement"
      :open-delay="openDelay"
      :close-delay="closeDelay"
      :content="content"
      :trigger="trigger"
      :transition="transition"
      :popper-options="popperOptions"
      :visible="visible"
      @tooltip-change="visibleChanges"
      ref="tooltip"
    >
      <slot></slot>
      <template #content>
        <ul class="dh-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key">
            <li
              v-if="item.divided"
              role="separator"
              class="divided-placeholder"
            ></li>
            <li
            @click="itemClick(item)"
              class="dh-dropdown__item"
              :class="{
                'is-disabled': item.disabled,
                'is-divided': item.divided,
              }"
              :id="`dh-dropdown__${item.key}`"
            >
              <RenderVnode :v-node="item.lable"></RenderVnode>
            </li>
          </template>
        </ul>
      </template>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Tooltip from "../Tooltip/Tooltip.vue";
import type { DropdownEmits, DropdownInstance, DropdownProps, MenuOptions } from "./type";
import type { TooltipInstance } from '../Tooltip/type';
import RenderVnode from '@/components/conmon/RenderFun'
defineOptions({
  name: "DhDropdown",
});
const props = withDefaults(defineProps<DropdownProps>(),{
  closeOnClick: true,
})
const emits = defineEmits<DropdownEmits>();
let tooltip = ref<TooltipInstance>()
const visibleChanges = (visible: boolean) => {
  emits("visible-change", visible);
};
const itemClick = (item:MenuOptions)=>{
//    判断是否禁用，如果禁用则直接return
    if(item.disabled) {
        return
    }
    emits('select',item)
    if(props.closeOnClick) {
      tooltip.value?.hide()
    }
}
//打开的回调
const openCallback = () => {
  tooltip.value?.show()
}
//关闭的回调
const closeCallback = () => {
  tooltip.value?.hide()
}
defineExpose<DropdownInstance>({
    'show':openCallback,
    'hide':closeCallback
})
</script>

<style scoped></style>
